"use client"

import { useEffect, useState } from "react";
import { Input, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, Select, SelectItem, Textarea } from "@nextui-org/react";
import { Controller, SubmitHandler, useForm } from "react-hook-form";
import { Web, WebType } from "@/types/app/web";
import { addWebDataAPI, getWebTypeListAPI } from '@/api/web'
import { Bounce, toast, ToastOptions } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';

const toastConfig: ToastOptions = {
  position: "top-right",
  autoClose: 5000,
  hideProgressBar: false,
  closeOnClick: true,
  pauseOnHover: true,
  draggable: true,
  progress: undefined,
  theme: "colored",
  transition: Bounce,
}

export default () => {
  const [loading, setLoading] = useState(false)
  const { isOpen, onOpen, onOpenChange } = useDisclosure();

  // 获取网站类型列表
  const [typeList, setTypeList] = useState<WebType[]>([])
  const getWebTypeList = async () => {
    const { data } = await getWebTypeListAPI() || { data: [] as WebType[] }
    setTypeList(data.filter(item => !item.isAdmin))
  }

  useEffect(() => {
    // 页面加载后检查是否有需要显示的消息
    const message = localStorage.getItem('toastMessage');
    if (message) {
      toast.success(message, toastConfig);
      localStorage.removeItem('toastMessage'); // 显示后删除消息
    }

    getWebTypeList()
  }, [])

  const { handleSubmit, control, formState: { errors }, trigger } = useForm<Web>({ defaultValues: {} as Web });
  const onSubmit: SubmitHandler<Web> = async (data, event) => {
    event?.preventDefault();

    setLoading(true)
    const { code, message } = await addWebDataAPI({ ...data, createTime: Date.now().toString() }) || { code: 0, message: "" }
    if (code !== 200) return toast.error(message, toastConfig);
    setLoading(false)

    localStorage.setItem('toastMessage', '🎉 提交成功, 请等待审核!');
    window.location.reload();
    onOpenChange()
  }

  // 表单样式
  const inputWrapper = "hover:!border-primary group-data-[focus=true]:border-primary rounded-md"

  return (
    <>
      <Button color="primary" variant="shadow" onPress={onOpen}>申请加入</Button>

      <Modal
        size="lg"
        backdrop="opaque"
        isOpen={isOpen}
        onOpenChange={onOpenChange}
        classNames={{
          backdrop: "bg-gradient-to-t from-zinc-900 to-zinc-900/10 backdrop-opacity-20"
        }}
      >
        <ModalContent>
          {(onClose) => (
            <>
              <ModalHeader className="flex flex-col gap-1">申请友链</ModalHeader>

              <ModalBody>
                <div className="mx-auto mb-4 p-3 space-y-2 border-l-[3px] border-primary bg-[#ecf7fe] rounded-md text-sm text-black-b">
                  <p>1、网站无任何违法乱纪的内容</p>
                  <p>2、网站文章不少于10篇（防止一时兴起）</p>
                  <p>3、网站原创内容占 80% (婉拒资源分享、资讯新闻、论坛社区之类的站点)</p>
                </div>

                <Controller
                  name="title"
                  control={control}
                  rules={{ required: '请输入网站名称' }}
                  render={({ field }) => (
                    <>
                      <Input
                        {...field}
                        type="text"
                        label="网站名称"
                        variant="bordered"
                        placeholder="示例：宇阳"
                        isInvalid={!!errors.title?.message}
                        errorMessage={errors.title?.message}
                        onBlur={() => trigger('title')}
                        classNames={{ inputWrapper }}
                      />
                    </>
                  )}
                />

                <Controller
                  name="description"
                  control={control}
                  rules={{ required: '请输入网站介绍' }}
                  render={({ field }) => (
                    <>
                      <Textarea
                        {...field}
                        label="网站介绍"
                        variant="bordered"
                        placeholder="示例：逐渐强大的全栈开发工程师"
                        isInvalid={!!errors.description?.message}
                        errorMessage={errors.description?.message}
                        onBlur={() => trigger('description')}
                        classNames={{ inputWrapper }}
                      />
                    </>
                  )}
                />

                <Controller
                  name="image"
                  control={control}
                  rules={{ required: '请输入图片地址', pattern: { value: /^https?:\/\//, message: "请输入正确的图片地址" } }}
                  render={({ field }) => (
                    <>
                      <Input
                        {...field}
                        type="text"
                        label="图片地址"
                        variant="bordered"
                        placeholder="示例：https://liuyuyang.net/avatar.jpg"
                        isInvalid={!!errors.image?.message}
                        errorMessage={errors.image?.message}
                        onBlur={() => trigger('image')}
                        classNames={{ inputWrapper }}
                      />
                    </>
                  )}
                />

                <Controller
                  name="url"
                  control={control}
                  rules={{ required: '请输入网站地址', pattern: { value: /^https?:\/\//, message: "请输入正确的网站地址" } }}
                  render={({ field }) => (
                    <>
                      <Input
                        {...field}
                        type="text"
                        label="网站地址"
                        variant="bordered"
                        placeholder="示例：https://liuyuyang.net/"
                        isInvalid={!!errors.url?.message}
                        errorMessage={errors.url?.message}
                        onBlur={() => trigger('url')}
                        classNames={{ inputWrapper }}
                      />
                    </>
                  )}
                />

                <Controller
                  name="email"
                  control={control}
                  rules={{ pattern: { value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: "请输入正确的邮箱" } }}
                  render={({ field }) => (
                    <>
                      <Input
                        {...field}
                        type="text"
                        label="邮箱（选填）"
                        variant="bordered"
                        placeholder="示例：liuyuyang1024@yeah.net"
                        isInvalid={!!errors.email?.message}
                        errorMessage={errors.email?.message}
                        onBlur={() => trigger('email')}
                        classNames={{ inputWrapper }}
                      />
                    </>
                  )}
                />

                <Controller
                  name="rss"
                  control={control}
                  rules={{ pattern: { value: /^https?:\/\//, message: "请输入正确的订阅地址" } }}
                  render={({ field }) => (
                    <>
                      <Input
                        {...field}
                        type="text"
                        label="订阅地址（选填）"
                        variant="bordered"
                        placeholder="示例：https://liuyuyang.net/index.php/feed/"
                        isInvalid={!!errors.rss?.message}
                        errorMessage={errors.rss?.message}
                        onBlur={() => trigger('rss')}
                        classNames={{ inputWrapper }}
                      />
                    </>
                  )}
                />

                <Controller
                  name="typeId"
                  control={control}
                  rules={{ required: '请选择网站类型' }}
                  render={({ field }) => (
                    <>
                      <Select
                        {...field}
                        label="网站类型"
                        variant="bordered"
                        placeholder="示例：技术类"
                        isInvalid={!!errors.typeId?.message}
                        errorMessage={errors.typeId?.message}
                        classNames={{
                          trigger: "hover:!border-primary data-[focus=true]:!border-primary data-[open=true]:!border-primary rounded-md"
                        }}
                      >
                        {typeList?.map(item => <SelectItem key={item.id}>{item.name}</SelectItem>)}
                      </Select>
                    </>
                  )}
                />
              </ModalBody>

              <ModalFooter>
                <Button color="primary" isLoading={loading} onPress={() => handleSubmit(onSubmit)()} className="w-full">加入</Button>
              </ModalFooter>
            </>
          )}
        </ModalContent>
      </Modal>
    </>
  );
}
